<template>
  <el-dialog
    v-model="dialogVisible"
    :title="$t('form.formData.shareData')"
    width="600"
  >
    <div>
      <el-text>{{ $t("form.formData.shareDataInner") }}</el-text>
      <span class="desc-text ml10">{{ $t("form.formData.shareDataInnerDescription") }}</span>
    </div>
    <url-operate
      :link-url="innerLink"
      class="ml20 mt20"
      qr-code-mode="popover"
    />
    <el-divider />
    <div>
      <el-text>{{ $t("form.formData.publicShare") }}</el-text>
      <span class="desc-text ml10">{{ $t("form.formData.publicShare") }}</span>
    </div>
    <el-switch
      class="ml20"
      size="default"
      v-model="enabledShare"
      @click="handleShareChange"
    />
    <div v-if="enabledShare">
      <url-operate
        :link-url="publicLink"
        class="ml20 mt20"
        qr-code-mode="popover"
      />
      <el-select
        class="mt10 ml20 select-width"
        v-model="showFields"
        multiple
        clearable
        collapse-tags
        popper-class="custom-header"
        :max-collapse-tags="1"
        size="default"
        @change="handleShareChange"
      >
        <template #header>
          <el-checkbox
            v-model="checkAll"
            :indeterminate="indeterminate"
            @change="handleCheckAll"
          >
            {{ $t("form.formData.checkAll") }}
          </el-checkbox>
        </template>
        <el-option
          v-for="item in fields"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import type { CheckboxValueType } from "element-plus";

import UrlOperate from "@/views/form/publish/UrlOperate.vue";
import { FieldItem } from "@/api/project/form";
import { getFormDataShareRequest, updateFormDataShareRequest } from "@/api/project/data";
import { getBaseUrlPath } from "@/utils/auth";

const dialogVisible = ref(false);

const dataId = ref<number>();

const fields = ref<FieldItem[]>([]);

const enabledShare = ref(false);

const publicLink = ref("");
const innerLink = ref("");

const show = (id: number, dataUniId: string, allFields: FieldItem[]) => {
  getFormDataShareRequest({
    dataId: id
  }).then(res => {
    innerLink.value = getBaseUrlPath() + "/form/data/" + dataUniId;
    if (res.data) {
      enabledShare.value = res.data?.enabled || false;
      showFields.value = res.data.viewFields || [];
      publicLink.value = getBaseUrlPath() + "/p/data/" + res.data.shareKey;
    } else {
      enabledShare.value = false;
      showFields.value = [];
      publicLink.value = "";
    }
  });
  dataId.value = id;
  dialogVisible.value = true;
  fields.value = allFields;
};

const checkAll = ref(false);
const indeterminate = ref(false);

const showFields = ref<string[]>([]);

watch(showFields, val => {
  if (val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (val.length === fields.value.length) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }
});

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false;
  if (val) {
    showFields.value = fields.value.map(field => field.value);
  } else {
    showFields.value = [];
  }
  handleShareChange();
};

const handleShareChange = () => {
  updateFormDataShareRequest({
    dataId: dataId.value,
    enabled: enabledShare.value,
    viewFields: showFields.value
  }).then(res => {
    if (res.data && res.data.shareKey) {
      publicLink.value = getBaseUrlPath() + "/p/data/" + res.data.shareKey;
    }
  });
};
defineExpose({
  show
});
</script>
